<!--
TailDropDown 小尾巴下拉菜单组件
-->
<script setup>
import {ref, computed} from 'vue'
import {
  DROP_DOWN_MENU_VERTICAL_ALIGN_CLASS_CENTER,
  DROP_DOWN_MENU_VERTICAL_ALIGN_CLASS_LEFT,
  DROP_DOWN_MENU_VERTICAL_ALIGN_CLASS_RIGHT,
  DROP_DOWN_MENU_VERTICAL_ALIGN_WAY_CENTER,
  DROP_DOWN_MENU_VERTICAL_ALIGN_WAY_LEFT,
  DROP_DOWN_MENU_VERTICAL_ALIGN_WAY_RIGHT
} from "@/constant/tail_drop_down_constant.js";

/**
 * 接收父组件传递的参数
 * @type {Prettify<Readonly<ExtractPropTypes<{}>>>}
 */
const props = defineProps({
  // 小尾巴下拉菜单组件是否收缩显示，收缩显示只显示下拉文本链接图标
  isShrinkDisplay: {type: Boolean, default: false},
  // 小尾巴下拉菜单组件下拉文本链接
  textLink: {type: String, default: '小尾巴下拉菜单下拉文本链接'},
  // 小尾巴下拉菜单组件下拉文本链接点击事件处理函数
  textLinkClickHandler: {
    type: Function, default: () => {
    }
  },
  // 小尾巴下拉菜单组件下拉文本链接高度
  textLinkHeight: {type: String, default: '2rem'},
  // 是否启用下拉图片链接替换下拉文本链接
  enableImageLink: {type: Boolean, default: false},
  // 小尾巴下拉菜单组件下拉图片链接图片地址
  imageLinkUrl: {type: String, default: ''},
  // 小尾巴下拉菜单组件下拉图片链接图片大小，图片默认圆形居中
  imageSize: {type: String, default: '2rem'},
  // 小尾巴下拉菜单组件下拉图片链接点击事件处理函数
  imageLinkClickHandler: {
    type: Function, default: () => {
    }
  },
  // 小尾巴下拉菜单组件下拉菜单与下拉链接之间的距离
  menuDistanceWithLink: {type: String, default: '0.5rem'},
  // 小尾巴下拉菜单组件下拉菜单与下拉链接之间的垂直对其方式，默认左对齐
  menuVerticalAlign: {type: String, default: DROP_DOWN_MENU_VERTICAL_ALIGN_WAY_LEFT},
  // 小尾巴下拉菜单组件下拉菜单项，由 {menuItemText: '', menuItemClickHandler: ()=>{}} 组成的数组
  menuItems: {type: Array, default: []},
  // 小尾巴下拉菜单组件下拉菜单项高度
  menuItemHeight: {type: String, default: '2rem'},
})

/**
 * 小尾巴下拉菜单组件下拉文本链接样式
 * @type {{height: *}}
 */
const textLinkStyle = {
  height: props?.textLinkHeight
}

/**
 * 小尾巴下拉菜单组件下拉图片链接样式
 * @type {{width: *, height: *}}
 */
const imageLinkStyle = {
  height: props?.imageSize,
  width: props?.imageSize,
}

/**
 * 小尾巴下拉菜单组件下拉菜单项样式
 * @type {{height: *}}
 */
const menuItemStyle = {
  height: props?.menuItemHeight
}

/**
 * 控制下拉菜单是否显示
 * @type {Ref<UnwrapRef<boolean>>}
 */
const dropDownMenuIsShow = ref(false)

/**
 * 小尾巴下拉菜单组件下拉菜单样式
 * @type {{paddingTop: {default: string, type: String | StringConstructor}}}
 */
const menuStyle = {
  paddingTop: props?.menuDistanceWithLink
}

/**
 * 动态控制下拉菜单与下拉链接之间的垂直对其方式
 */
// 下拉菜单的 class 类名
const dropDownMenuClassName = computed(() => {
  // 判断指定的下拉菜单与下拉链接之间的垂直对其方式
  switch (props?.menuVerticalAlign) {
    case DROP_DOWN_MENU_VERTICAL_ALIGN_WAY_LEFT:
      return DROP_DOWN_MENU_VERTICAL_ALIGN_CLASS_LEFT
    case DROP_DOWN_MENU_VERTICAL_ALIGN_WAY_CENTER:
      return DROP_DOWN_MENU_VERTICAL_ALIGN_CLASS_CENTER
    case DROP_DOWN_MENU_VERTICAL_ALIGN_WAY_RIGHT:
      return DROP_DOWN_MENU_VERTICAL_ALIGN_CLASS_RIGHT
  }
})

</script>

<template>
  <!-- 小尾巴下拉菜单组件 -->
  <div class="tail-drop-down">
    <!-- 小尾巴下拉菜单组件下拉链接 -->
    <div
        class="tail-drop-down-link"
        @mouseover="dropDownMenuIsShow = true"
        @mouseout="dropDownMenuIsShow = false"
    >
      <!-- 小尾巴下拉菜单组件下拉文本链接 -->
      <div
          class="tail-drop-down-text-link"
          v-if="!enableImageLink"
          :style="textLinkStyle"
          @click="textLinkClickHandler"
      >
        <!-- 小尾巴下拉菜单组件下拉文本链接图标 -->
        <span class="tail-drop-down-text-link-icon">
          <slot name="dropDownTextLinkIcon"></slot>
        </span>
        <span v-show="!isShrinkDisplay">{{ textLink }}</span>
        <!--
          小尾巴下拉菜单组件下拉链接图标
          鼠标悬浮于下拉菜单，下拉菜单显示时动态添加“小尾巴下拉菜单组件下拉链接图标旋转样式”
        -->
        <div
            v-show="menuItems.length > 0"
            class="tail-drop-down-link-icon"
            :class="dropDownMenuIsShow ? 'tail-drop-down-link-icon-rotate' : ''"
        >
          <slot name="dropDownLinkIcon"></slot>
        </div>
      </div>
      <!-- 小尾巴下拉菜单组件下拉图片链接 -->
      <slot name="dropDownImageLink" v-if="enableImageLink">
        <div
            class="tail-drop-down-image-link"
            :style="imageLinkStyle"
            v-if="enableImageLink"
        >
          <img :src="imageLinkUrl" alt="小尾巴下拉菜单下拉图片链接">
        </div>
      </slot>
      <!-- 小尾巴下拉菜单组件下拉菜单盒子 -->
      <div
          class="tail-drop-down-menu-box"
          :class="dropDownMenuClassName"
          :style="menuStyle"
      >
        <div
            class="tail-drop-down-menu"
            v-show="dropDownMenuIsShow"
        >
          <slot name="dropDownMenu">
            <ul>
              <!-- 小尾巴下拉菜单组件下拉菜单项 -->
              <li
                  class="tail-drop-down-menu-item"
                  v-for="(menuItem, idx) in menuItems"
                  :key="idx"
                  :style="menuItemStyle"
                  @click="menuItem?.menuItemClickHandler"
              >
                <span>{{ menuItem?.menuItemText }}</span>
              </li>
            </ul>
          </slot>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
/*
 * 小尾巴下拉菜单组件
 */
.tail-drop-down {
  color: var(--tail-drop-down-font-color);

  /*
   * 清除默认样式
   */
  div, ul, li, span {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /*
   * 小尾巴下拉菜单组件下拉链接
   */
  .tail-drop-down-link {
    position: relative;
    display: inline-block;
    cursor: pointer;
    // 文字不能被选中
    user-select: none;

    /*
     * 小尾巴下拉菜单组件下拉文本链接
     */
    .tail-drop-down-text-link {
      box-sizing: border-box;
      padding: 0.5rem;
      border-radius: 0.5rem;
      background-color: var(--tail-drop-down-bgc);
      transition: all 0.3s;
      display: flex;
      justify-content: center;
      align-items: center;
      // 文本不换行
      white-space: nowrap;

      &:hover {
        background-color: var(--tail-drop-down-hover-bgc);
        color: var(--tail-drop-down-hover-font-color);
      }

      /*
       * 小尾巴下拉菜单组件下拉链接图标
       */
      .tail-drop-down-link-icon {
        margin-left: 0.5rem;
        transition: all 0.3s;
        // 设置旋转中心点 x y
        transform-origin: 50% 50%;
        display: flex;
        justify-content: center;
        align-items: end;
      }

      /*
       * 小尾巴下拉菜单组件下拉链接图标旋转样式
       */
      .tail-drop-down-link-icon-rotate {
        transform: rotateZ(180deg);
        transition-delay: -0.1s;
      }
    }

    /*
     * 小尾巴下拉菜单组件下拉图片链接
     */
    .tail-drop-down-image-link {
      border-radius: 50%;
      background-color: var(--tail-drop-down-bgc);
      transition: all 0.5s;
      overflow: hidden;

      &:hover {
        transform: rotateZ(360deg);
      }

      img {
        width: 100%;
      }
    }

    /*
     * 小尾巴下拉菜单组件下拉菜单盒子
     */
    .tail-drop-down-menu-box {
      position: absolute;
      top: 100%;

      /*
     * 小尾巴下拉菜单组件下拉菜单
     */
      .tail-drop-down-menu {
        border-radius: 0.5rem;
        // 如果溢出隐藏会影响子菜单的显示
        // overflow: hidden;

        /*
         * 小尾巴下拉菜单组件下拉菜单项
         */
        .tail-drop-down-menu-item {
          z-index: 1;
          box-sizing: border-box;
          padding: 0.5rem;
          background-color: var(--tail-drop-down-menu-item-bgc);
          transition: all 0.3s;
          overflow: hidden;
          display: flex;
          justify-content: start;
          align-items: center;
          // 文本不换行
          white-space: nowrap;

          &:hover {
            background-color: var(--tail-drop-down-hover-bgc);
            color: var(--tail-drop-down-hover-font-color);
          }

          // 当前元素的父元素的第一个子元素
          &:first-child {
            border-top-right-radius: 0.5rem;
            border-top-left-radius: 0.5rem;
          }

          // 当前元素的父元素的最后一个子元素
          &:last-child {
            border-bottom-right-radius: 0.5rem;
            border-bottom-left-radius: 0.5rem;
          }
        }
      }
    }

    /*
     * 小尾巴下拉菜单组件下拉菜单盒子与下拉链接之间的垂直对其方式
     */
    // 左对齐
    .tail-drop-down-menu-box-v-align-left {
      left: 0;
    }

    // 居中对齐
    .tail-drop-down-menu-box-v-align-center {
      left: 50%;
      transform: translateX(-50%);
    }

    // 右对齐
    .tail-drop-down-menu-box-v-align-right {
      right: 0;
    }
  }
}
</style>